<template>
	<div class="rec">
		<header>

			<div class="permsg">
				<div class="score">{{stuscore}}</div>
				<div class="rank">{{sturank}}</div>
			</div>
		</header>
		<div class="content">
			<header>
				<div class="content_tit"></div>
			</header>
			<div class="share_nav">
				<div class="back_btn" @click="back()"></div>
				<div class="start_tit">开始录制</div>
			</div>
			<div class="content_bg">
				<div class="fanwen">
					<ul class="grade">
						<li class="one list">
							<div>
								<span class="g_tit">适合9岁以下</span>
								<span :class="{'g_open': isA1,'g_close':!isA1}" @click.self="hidebom1()"></span>
							</div>
							<ul class="{'show_bom' :isA1,'hide_bom' :!isA1}" v-if="show_bom1">
								<li v-for="(item,index) in under_list">
									<div class="weiluzhi" v-if="!item.isread"></div>
									<div :class="item.initcls" v-else @click="playAu(index)"></div>
									<div class="article">
										<p class="a_name">作品名称 : <span>{{item.name}}</span></p>
										<p class="a_jifen" v-if="item.score && item.score>0">已获积分 : <span>{{item.score}}分</span></p>
										<p class="a_jifen" v-else>本篇课文你还未录制呢！</span>
										</p>
									</div>
									<div class="share_btn" v-if="item.isread" @click="share(item.name,item.audio_url,item.ch_code)">分享</div>
									<div class="reading" v-else @click="readModel(item.ch_code,item.name)">立即朗读</div>
								</li>
							</ul>
						</li>
						<li class="two list">
							<div>
								<span class="g_tit">适合9岁以上</span>
								<span :class="{'g_open': isA2,'g_close':!isA2}" @click.self="hidebom2()"></span>
							</div>
							<ul class="{'show_bom' :isA2,'hide_bom' :!isA2}" v-if="show_bom2">
								<li v-for="(item,index) in above_list">
									<div class="weiluzhi" v-if="!item.isread"></div>
									<div :class="item.initcls" v-else @click="playAu1(index)"></div>
									<div class="article">
										<p class="a_name">作品名称 : <span>{{item.name}}</span></p>
										<p class="a_jifen" v-if="item.score && item.score>0">已获积分 : <span>{{item.score}}分</span></p>
										<p class="a_jifen" v-else>本篇课文你还未录制呢！</span>
										</p>
									</div>
									<div class="share_btn" v-if="item.isread" @click="share(item.name,item.audio_url,item.ch_code)">分享</div>
									<div class="reading" v-else @click="readModel(item.ch_code,item.name)">立即朗读</div>
								</li>
							</ul>
						</li>
					</ul>

				</div>
				<div class="zidingyi">
					<ul>
						<li class="z_tit">
							<span class="z_txt">自定义朗读</span>
							<span :class="zdycls" @click="showzdy()"></span>
						</li>
					</ul>
					<ul v-show="isC">
						<li class="z_reading">
							<span class="zr_pic"></span>
							<span class="add_read">新增自定义朗读</span>
							<span class="read_btn" @click="readByself()">立即朗读</span>
						</li>
						<li class="z_share" v-for="(item,i) in customizeList">
							<div :class="[zbtncls[i]]" @click="playzdy(i)"></div>
							<div class="z_center">
								<p class="z_name">作品名称 : <span>{{item.txtname}}</span></p>
								<p class="z_jifen">已获积分 : <span>{{item.inteValue}}分</span></p>
							</div>
							<div class="z_right" @click="share(item.txtname,item.pathOfText,item.txtcode)">
								分享
							</div>
						</li>
					</ul>
				</div>
				<div class="s_footer"></div>
				<div class="clearfix">
				</div>
			</div>

		</div>
		<!--下面是弹出层-->
		<div class="alert" v-show="show_alert">
			<div class="mask"></div>
			<div class="flo_one">
				<!--<div class="flo_two">
					<div class="ledger"></div>
					<div class="inside"></div>-->
				<div class="flo_three">
					<!--<div class="notice">请选择年龄段</div>-->
					<ul class="select_grade">
						<li :class="[one_grade,{no_click:more_nine}]" @click="hide_zhezhao(1)" id="age_bom"></li>
						<li :class="[one_grade,{no_click:less_nine}]" @click="hide_zhezhao(0)" id="age_top"></li>
						<div class="txt_tishi">请仔细分辨年龄段的区别哦~</div>
					</ul>
				</div>
				<!--</div>-->

			</div>
		</div>
		<!--弹出层结束-->
		<audio ref="audio" :src="audiourl" @ended="playend"></audio>
	</div>
</template>

<script type="text/ecmascript-6">
	export default {
		data() {
			return {
				show_alert: true,
				isA1: false,
				show_bom1: false,
				isA2: false,
				show_bom2: false,
				more_nine: false,
				less_nine: false,
				zbtncls: [],
				isC: true,
				zdycls: 'z_open', //自定义朗读展开按钮样式
				audiourl: '',
				one_grade: 'one_grade',
				userage: '', //用户选择的年龄段 0：9岁以下 1：以上
				customizeList: [], //自定义朗读列表
				above_list: [{
						name: '想要恐龙的男孩',
						isread: false, //是否已读
						initcls: 'again', //播放按钮样式
						ch_code: '10610116', //章节id 必须为字符串类型
						audio_url: '',
						score: 0
					},
					{
						name: '胡萝卜地',
						isread: false,
						initcls: 'again',
						ch_code: '10610117',
						audio_url: '',
						score: 0
					},
					{
						name: '不会哭不会笑的狮子',
						isread: false,
						initcls: 'again',
						ch_code: '10610118',
						audio_url: '',
						score: 0
					},
					{
						name: '豹子的鼓',
						isread: false,
						initcls: 'again',
						ch_code: '10610119',
						audio_url: '',
						score: 0
					},
					{
						name: '海浪花变成的镜子',
						isread: false,
						initcls: 'again',
						ch_code: '10610120',
						audio_url: '',
						score: 0
					},
					{
						name: '寄自床底下的信',
						isread: false, //是否已读
						initcls: 'again', //播放按钮样式
						ch_code: '10610121', //章节id 必须为字符串类型
						audio_url: '',
						score: 0
					},
					{
						name: '马曼杜克和吓人的故事',
						isread: false,
						initcls: 'again',
						ch_code: '10610122',
						audio_url: '',
						score: 0
					},
					{
						name: '长在树上的猫尾巴',
						isread: false,
						initcls: 'again',
						ch_code: '10610124',
						audio_url: '',
						score: 0
					},
					{
						name: '十二生肖的传说',
						isread: false,
						initcls: 'again',
						ch_code: '10610125',
						audio_url: '',
						score: 0
					},
					{
						name: '“年”的传说',
						isread: false,
						initcls: 'again',
						ch_code: '10610126',
						audio_url: '',
						score: 0
					},
					{
						name: '盘古开天地',
						isread: false, //是否已读
						initcls: 'again', //播放按钮样式
						ch_code: '10610127', //章节id 必须为字符串类型
						audio_url: '',
						score: 0
					},
					{
						name: '夸父逐日',
						isread: false,
						initcls: 'again',
						ch_code: '10610128',
						audio_url: '',
						score: 0
					},
					{
						name: '心正则笔正',
						isread: false,
						initcls: 'again',
						ch_code: '10610129',
						audio_url: '',
						score: 0
					},
					{
						name: '巨人和孩子',
						isread: false,
						initcls: 'again',
						ch_code: '10610131',
						audio_url: '',
						score: 0
					},
					{
						name: '父与子',
						isread: false,
						initcls: 'again',
						ch_code: '10610132',
						audio_url: '',
						score: 0
					}
				], //9岁以上范围列表
				under_list: [{
						name: '善良的狐狸',
						isread: false, //是否已读
						initcls: 'again', //播放按钮样式
						ch_code: '10610101', //章节id 必须为字符串类型
						audio_url: '',
						score: 0
					},
					{
						name: '狐假虎威',
						isread: false,
						initcls: 'again',
						ch_code: '10610102',
						audio_url: '',
						score: 0
					},
					{
						name: '艾尔的新毯子',
						isread: false,
						initcls: 'again',
						ch_code: '10610103',
						audio_url: '',
						score: 0
					},
					{
						name: '欺善怕恶的小猴子',
						isread: false,
						initcls: 'again',
						ch_code: '10610104',
						audio_url: '',
						score: 0
					},
					{
						name: '开花的树',
						isread: false,
						initcls: 'again',
						ch_code: '10610105',
						audio_url: '',
						score: 0
					},
					{
						name: '一根了不起的木棍',
						isread: false, //是否已读
						initcls: 'again', //播放按钮样式
						ch_code: '10610106', //章节id 必须为字符串类型
						audio_url: '',
						score: 0
					},
					{
						name: '小猴尿床',
						isread: false,
						initcls: 'again',
						ch_code: '10610107',
						audio_url: '',
						score: 0
					},
					{
						name: '甜饼的秘密',
						isread: false,
						initcls: 'again',
						ch_code: '10610108',
						audio_url: '',
						score: 0
					},
					{
						name: '猴哥的烦恼',
						isread: false,
						initcls: 'again',
						ch_code: '10610109',
						audio_url: '',
						score: 0
					},
					{
						name: '真假小白兔',
						isread: false,
						initcls: 'again',
						ch_code: '10610110',
						audio_url: '',
						score: 0
					},
					{
						name: '金色的房子',
						isread: false, //是否已读
						initcls: 'again', //播放按钮样式
						ch_code: '10610111', //章节id 必须为字符串类型
						audio_url: '',
						score: 0
					},
					{
						name: '我们都听你的',
						isread: false,
						initcls: 'again',
						ch_code: '10610112',
						audio_url: '',
						score: 0
					},
					{
						name: '不理妈妈的鸡蛋',
						isread: false,
						initcls: 'again',
						ch_code: '10610113',
						audio_url: '',
						score: 0
					},
					{
						name: '三个笨学生',
						isread: false,
						initcls: 'again',
						ch_code: '10610114',
						audio_url: '',
						score: 0
					},
					{
						name: '爱转头的猫头鹰',
						isread: false,
						initcls: 'again',
						ch_code: '10610115',
						audio_url: '',
						score: 0
					}
				] //9岁以下范文列表
			}
		},
		computed: {
			stuscore() {
				return this.$store.state.stu_jifen;
			},
			sturank() {
				return this.$store.state.stu_paiming;
			}
		},
		methods: {
			share(title, url, chid) {
				var stu_id=this.$store.state.stu_id;
				var openDate=this.$store.state.opendate;
				var ads = actWeb + '/share?title=' + title + '&url=' + url + '&chid=' + chid+'&stu_id='+stu_id+'&openDate='+openDate;
				//var ads = "https://stu-rc.m.tbkt.cn";
				var name = title;
				try {
					appobject.Interactive("ys_share," + ads + "|" + name);
				} catch(e) {
					layer.tips('PC端不支持此功能');
					return;
				}
			},
			hidebom1() {
				if(this.show_bom1 == false) {
					this.show_bom1 = true;
					this.isA1 = !this.isA1;
				} else {
					this.show_bom1 = false;
					this.isA1 = false;
				}
			},
			hidebom2() {
				if(this.show_bom2 == false) {
					this.show_bom2 = true;
					this.isA2 = !this.isA2;
				} else {
					this.show_bom2 = false;
					this.isA2 = false;
				}
			},
			showzdy() {
				//自定义朗读按钮收放
				if(this.zdycls == 'z_open') {
					this.zdycls = 'z_close';
					this.isC = false;
				} else {
					this.zdycls = 'z_open';
					this.isC = true;
				}
			},
			hide_zhezhao(index) {
				//选择合适的年龄段
				this.userage = index;
				localStorage.setItem('selAge', index);
				if(index == 0) {
					this.less_nine = true;
					this.hidebom1();

				} else {
					this.more_ninetrue;
					this.hidebom2();
				}
				this.show_alert = false;
			},
			back() {
				this.$router.go(-1);
			},
			readModel(code, title, ) {
				this.$router.push({
					path: '/read',
					query: {
						ch_code: code,
						title: encodeURI(title)
					}
				});
			},
			readByself() {
				//自定义朗读 
				this.$router.push('/readbyself');
			},
			playAu(index) {
				//9以下播放录音
				let dt = this.under_list[index];
				this.audiourl = media_ads + this.under_list[index].audio_url.replace('/UploadFileS', '');
				if(this.under_list[index].initcls == 'again') {
					this.initAllBtnState();
					dt.initcls = 'stop';
					this.$nextTick(() => {
						this.$refs.audio.play();
					});
				} else {
					dt.initcls = 'again';
					this.$nextTick(() => {
						this.$refs.audio.pause();
					});
				}
				this.under_list.splice(index, 1, dt);
			},
			playAu1(index) {
				//9以上播放录音
				let dt = this.above_list[index];
				this.audiourl = media_ads + this.above_list[index].audio_url.replace('/UploadFileS', '');
				if(this.above_list[index].initcls == 'again') {
					this.initAllBtnState();
					dt.initcls = 'stop';
					this.$nextTick(() => {
						this.$refs.audio.play();
					});
				} else {
					dt.initcls = 'again';
					this.$nextTick(() => {
						this.$refs.audio.pause();
					});
				}
				this.above_list.splice(index, 1, dt);
			},
			playzdy(index) {
				this.audiourl = media_ads + this.customizeList[index].pathOfText.replace('/UploadFileS', '');
				if(this.zbtncls[index] == 'z_left') {
					this.initAllBtnState();
					this.zbtncls.splice(index, 1, 'z_stop');
					this.$nextTick(() => {
						this.$refs.audio.play();
					});
				} else {
					this.zbtncls.splice(index, 1, 'z_left');
					this.$nextTick(() => {
						this.$refs.audio.pause();
					});
				}
			},
			playend() {
				this.$refs.audio.pause();
				this.initAllBtnState();
			},
			initAllBtnState() {
				//初始化所有播放按钮的状态
				this.above_list.forEach((obj, i) => {
					let item = obj;
					item.initcls = 'again';
					this.above_list.splice(i, 1, item);
				});
				this.under_list.forEach((obj, i) => {
					let item = obj;
					item.initcls = 'again';
					this.under_list.splice(i, 1, item);
				});
				this.zbtncls.forEach((obj, i) => {
					let item = obj;
					item = 'z_left';
					this.zbtncls.splice(i, 1, item);
				});

			}
		},
		created() {
			//localStorage.removeItem('isrepeat');
			this.$store.commit('hidefooter');
			this.$http.get(domain + '/API/SummerAct/GetRecordingList', {
				params: {
					'intUserId': this.$store.state.stu_id
				}
			}).then(res => {
				console.log(res.body);
				let modlist = res.body.modelList; //已朗读过列表
				let cuslist = res.body.customizeList; //自定义朗读列表
				cuslist.forEach((obj, i) => {
					this.zbtncls.push('z_left');
				})
				this.customizeList.splice(0, 0, ...cuslist);
				var that = this;
				this.under_list.forEach((n, m) => {
					//在9岁以下列表中对比
					for(var i = 0; i < modlist.length; i++) {
						let md = modlist[i];
						if(n.ch_code == md.txtcode) {
							let newone = that.under_list[m];
							newone.name = md.txtname;
							newone.score = md.inteValue;
							newone.isread = true;
							newone.audio_url = md.pathOfText;
							that.under_list.splice(m, 1, newone);
						}
					}
				});
				this.above_list.forEach((n, m) => {
					//在9岁以下列表中对比
					for(var i = 0; i < modlist.length; i++) {
						let md = modlist[i];
						if(n.ch_code == md.txtcode) {
							let newone = that.above_list[m];
							newone.name = md.txtname;
							newone.score = md.inteValue;
							newone.isread = true;
							newone.audio_url = md.pathOfText;
							that.above_list.splice(m, 1, newone);
						}
					}
				});
			})
		},
		mounted() {
			var selage = localStorage.getItem('selAge');
			if(selage) {
				if(selage == 0) {
					this.less_nine = true;
					this.hidebom1();
				} else {
					this.more_ninetrue;
					this.hidebom2();
				}
				this.show_alert = false;
			} else {
				this.show_alert = true;
			}

		}
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/scss/common";
	.rec {
		background-color: #f5ddb9;
		header {
			padding-top: 115px/$ppr;
		}
	}
	
	.content {
		/*padding-bottom:150px/$ppr;*/
		background-color: #51cdec;
		position: relative;
		top: -50px/$ppr;
		header {
			padding-top: 0px/$ppr;
			.content_tit {
				width: 720px/$ppr;
				height: 150px/$ppr;
				background-image: url(./img/paopao.png);
				background-size: 100% 100%;
			}
		}
		.share_nav {
			box-sizing: border-box;
			width: 720px/$ppr;
			height: 110px/$ppr;
			background-color: #56af00;
			padding: 25px/$ppr;
			position: relative;
			left: 0;
			top: -705px/$ppr;
			z-index: 2;
			.back_btn {
				width: 64px/$ppr;
				height: 64px/$ppr;
				background-image: url(./img/back.png);
				background-size: 100% 100%;
				float: left;
			}
			.start_tit {
				font-size: 36px/$ppr;
				color: #FFFFFF;
				float: left;
				margin-left: 200px/$ppr;
				line-height: 64px/$ppr;
			}
		}
		.content_bg {
			width: 720px/$ppr;
			height: auto;
			.fanwen {
				position: relative;
				z-index: 3;
				top: -110px/$ppr;
				width: 670px/$ppr;
				height: auto;
				margin: 0 auto;
				/*margin-bottom: 80px/$ppr;*/
				/*padding: 0 20px/$ppr;*/
				.grade {
					width: 670px/$ppr;
					.two {
						border-radius: 0 0 25px/$ppr 25px/$ppr !important;
					}
					.list {
						box-sizing: border-box;
						height: auto;
						width: 100%;
						background-color: #c9f4ff;
						border-bottom: 1px solid #51cdec;
						line-height: 90px/$ppr;
						/*padding:0 25px/$ppr;*/
						font-size: 28px/$ppr;
						float: left;
						.g_tit {
							margin-left: 15px/$ppr;
						}
						.g_open {
							float: right;
							width: 50px/$ppr;
							height: 50px/$ppr;
							background-image: url(./img/g_open.png);
							background-size: 100% 100%;
							margin-top: 20px/$ppr;
							margin-right: 20px/$ppr;
						}
						.g_close {
							float: right;
							width: 50px/$ppr;
							height: 50px/$ppr;
							background-image: url(./img/g_close.png);
							background-size: 100% 100%;
							margin-top: 20px/$ppr;
							margin-right: 20px/$ppr;
						}
						ul {
							float: left;
							li {
								background-color: #FFFFFF;
								/*clear: both;*/
								width: 100%;
								height: 120px/$ppr;
								box-sizing: border-box;
								padding-left: 15px/$ppr;
								padding-top: 25px/$ppr;
								border-bottom: 1px solid #dcdcdc;
								float: left;
								.stop {
									width: 70px/$ppr;
									height: 70px/$ppr;
									background-image: url(./img/stop.png);
									background-size: 100% 100%;
									float: left;
								}
								.article {
									float: left;
									margin-left: 15px/$ppr;
									color: #298ccb;
									.a_name {
										width: 380px/$ppr;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
									p {
										line-height: 40px/$ppr;
									}
								}
								.share_btn {
									width: 150px/$ppr;
									height: 70px/$ppr;
									background-color: #207dd4;
									float: right;
									margin-right: 20px/$ppr;
									border-radius: 35px/$ppr;
									text-align: center;
									line-height: 70px/$ppr;
									color: #FFFFFF;
								}
								.again {
									width: 70px/$ppr;
									height: 70px/$ppr;
									background-image: url(./img/again.png);
									background-size: 100% 100%;
									float: left;
								}
								.weiluzhi {
									width: 70px/$ppr;
									height: 70px/$ppr;
									background-image: url(./img/weiluzhi.png);
									background-size: 100% 100%;
									float: left;
								}
								.reading {
									width: 150px/$ppr;
									height: 70px/$ppr;
									background-color: #0bcd94;
									float: right;
									margin-right: 20px/$ppr;
									border-radius: 35px/$ppr;
									text-align: center;
									line-height: 70px/$ppr;
									color: #FFFFFF;
								}
							}
						}
						.hide_bom {
							display: none;
						}
						.show_bom {
							display: block;
						}
					}
					.one {
						height: auto;
						width: 670px/$ppr;
						border-radius: 25px/$ppr 25px/$ppr 0 0;
					}
					.six {
						border-radius: 0 0 25px/$ppr 25px/$ppr;
					}
				}
			}
		}
	}
	
	.zidingyi {
		clear: both;
		position: relative;
		top: -30px/$ppr;
		font-size: 28px/$ppr;
		padding-bottom: 20px/$ppr;
		padding-top: -30px/$ppr;
		width: 720px/$ppr;
		background-color: #51cdec;
		ul {
			width: 670px/$ppr;
			margin: 0 auto;
			.z_tit {
				width: 100%;
				;
				height: 90px/$ppr;
				background-color: #1fb0d3;
				line-height: 90px/$ppr;
				text-align: center;
				color: #FFFFFF;
				font-weight: bold;
				border-radius: 25px/$ppr 25px/$ppr 0 0;
				.z_open {
					float: right;
					width: 51px/$ppr;
					height: 51px/$ppr;
					background-image: url(./img/g_open.png);
					background-size: 100% 100%;
					margin-top: 20px/$ppr;
					margin-right: 30px/$ppr;
				}
				.z_close {
					float: right;
					width: 51px/$ppr;
					height: 51px/$ppr;
					background-image: url(./img/g_close.png);
					background-size: 100% 100%;
					margin-top: 20px/$ppr;
					margin-right: 30px/$ppr;
				}
			}
			.z_reading {
				width: 100%;
				height: 120px/$ppr;
				line-height: 120px/$ppr;
				background-color: #FFFFFF;
				border-bottom: 1px solid #dcdcdc;
				.zr_pic {
					width: 65px/$ppr;
					height: 75px/$ppr;
					background-image: url(./img/zidingyi.png);
					background-size: 100% 100%;
					float: left;
					margin-top: 22px/$ppr;
					margin-left: 20px/$ppr;
				}
				.add_read {
					margin-left: 28px/$ppr;
					color: #298ccb;
				}
				.read_btn {
					width: 150px/$ppr;
					height: 70px/$ppr;
					border-radius: 35px/$ppr;
					float: right;
					background-color: #0bcd94;
					margin-top: 25px/$ppr;
					margin-right: 20px/$ppr;
					text-align: center;
					line-height: 70px/$ppr;
					;
					color: #FFFFFF;
				}
			}
			.z_share {
				width: 100%;
				height: 120px/$ppr;
				line-height: 120px/$ppr;
				border-bottom: 1px solid #dcdcdc;
				background-color: #FFFFFF;
				padding-top: 28px/$ppr;
				&:last-child {
					border-radius: 0 0 25px/$ppr 25px/$ppr;
					border-bottom: none;
				}
				.z_left {
					width: 65px/$ppr;
					height: 65px/$ppr;
					background-image: url(./img/again.png);
					background-size: 100% 100%;
					float: left;
					margin-left: 25px/$ppr;
				}
				.z_stop {
					width: 65px/$ppr;
					height: 65px/$ppr;
					background-image: url(./img/stop.png);
					background-size: 100% 100%;
					float: left;
					margin-left: 25px/$ppr;
				}
				.z_center {
					margin-left: 28px/$ppr;
					color: #298ccb;
					float: left;
					line-height: 40px/$ppr;
					.z_name {
						width: 360px/$ppr;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.z_right {
					width: 150px/$ppr;
					height: 70px/$ppr;
					border-radius: 35px/$ppr;
					background-color: #207dd4;
					float: right;
					margin-right: 25px/$ppr;
					text-align: center;
					line-height: 70px/$ppr;
					color: #FFFFFF;
				}
			}
		}
	}
	
	.s_footer {
		width: 720px/$ppr;
		height: 240px/$ppr;
		background-image: url(./img/footer.png);
		background-size: 100% 100%;
	}
	
	.clearfix {
		clear: both;
	}
	
	.alert {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 11;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
		.flo_one {
			width: 720px/$ppr;
			height: 936px/$ppr;
			background-image: url(./img/alert_ban.png);
			background-size: 100% 100%;
			margin: 0 auto;
			position: absolute;
			top: 60%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			z-index: 12;
			/*.flo_two {
				.ledger {
					width: 678px/$ppr;
					height: 68px/$ppr;
					background-image: url(./img/ledger.png);
					background-size: 100% 100%;
					position: absolute;
					z-index: 13;
					top: -40px/$ppr;
					left: -24px/$ppr;
				}
				.inside {
					width: 544px/$ppr;
					height: 380px/$ppr;
					background-image: url(./img/inside.png);
					background-size: 100% 100%;
					position: absolute;
					z-index: 14;
					top: 63px/$ppr;
					left: 40px/$ppr;
				}*/
			.flo_three {
				position: absolute;
				z-index: 15;
				/*.notice {
						position: absolute;
						z-index: 16;
						width: 378px/$ppr;
						height: 160px/$ppr;
						background-image: url(./img/notice.png);
						background-size: 100% 100%;
						left: 123px/$ppr;
						top: -110px/$ppr;
						color: #f6ee96;
						line-height: 160px/$ppr;
						text-align: center;
					}*/
				.select_grade {
					position: absolute;
					z-index: 16;
					top: 170px/$ppr;
					left: 146px/$ppr;
					background-color: #50d1f7;
					.one_grade {
						/*margin: 60px/$ppr 25px/$ppr 30px/$ppr 25px/$ppr;
							margin: 0 auto;*/
					}
					.no_click {}
					#age_top {
						width: 426px/$ppr;
						height: 85px/$ppr;
						background-image: url(./img/9bom.png);
						background-size: 100% 100%;
						margin-bottom: 40px/$ppr;
					}
					#age_bom {
						width: 426px/$ppr;
						height: 85px/$ppr;
						background-image: url(./img/9top.png);
						background-size: 100% 100%;
						margin-bottom: 50px/$ppr;
					}
					.txt_tishi {
						width: 354px/$ppr;
						height: 36px/$ppr;
						background-color: #30acda;
						border-radius: 18px/$ppr;
						text-align: center;
						color: #FFFFFF;
						font-size: 18px/$ppr;
						line-height: 36px/$ppr;
						margin: 0 auto;
					}
				}
			}
			/*}*/
		}
	}
</style>